<template>
	<view class='main-container'>
		<!--头部 搜索框开始-->
		<view class='search'>
			<view class='inp'>
				<image src='../../static/images/search1.png'></image>
				<input placeholder="搜索圈子" auto-focus v-model="searchValue"  maxlength="15"/>
				<image src='../../static/images/close1.png' v-if="searchValue.length!=0" @tap='clear'></image>
			</view>
			<text @tap='search'>搜索</text>
		</view>
		<!--推荐搜索块开始-->
		<view class='tuijian' v-if="isDis">
			<view v-for="(item,index) in tuijians" :key="index" @tap='tuijianSearch(item.title)'>
				{{item.title}}
			</view>
		</view>
		<text class='his' v-if="isDis&&history.length!=0">搜索历史</text>
		<!-- 历史搜素开始 -->
		<view class='history' v-if="isDis&&history.length!=0">
			<view v-for="(item,index) in historys" @tap='tuijianSearch(item)' :key="index">
				{{item}}
			</view>
			<view @tap='clearHistory' style='color:#586C94;text-align:center;border:none;'>清空搜索历史</view>
		</view>
		<!--搜索结果开始-->
		<view class='quans' v-if="!isDis">
			<view v-if="all.length==0" style="width: 100%;font-size: 28upx;text-align: center;color: #999999; height: 300upx;line-height: 300upx;">
				无搜索结果
			</view>
			<view class="quan" v-for="(item,index) in all" :key="index" @tap="go_detail(item.id)">
				<view class="top">
					<image :src="getRealPath(item.imgUrl)" mode="" @tap.stop="go_userinfo(item.userId)"></image>
					<view>
						<text class="nickName" @tap.stop="go_userinfo(item.userId)">{{item.nickName}}</text>
						<text class="time">{{timeAgo(item.createTime)}}</text>
					</view>
				</view>
				<view class="detail">
					<text>{{item.quanDesc}}</text>
					<view class="img" v-if="item.quanImgUrl.length!=0">
						<image class="dimage" @tap.stop="prevImg(item.quanImgUrl)" :src="getRealPath(item.quanImgUrl)" alt="" mode="aspectFill"></image>
					</view>
					<view class="duotu" v-if="item.images.length!=0">
						<view v-for="(it,i) in item.images" :key="i">
							<image @tap.stop="prevMoreImg(item.images,i)" :src="getRealPath(it.imgUrl)" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="pinglun">
					<view>
						<image src="../../static/images/comment.png" mode=""></image> <text v-if="item.comments!=0">{{item.comments}}</text><text
						 v-if="item.comments==0">评论</text>
					</view>
					<view>
						<image src="../../static/images/dianzan.png" mode=""></image><text v-if="item.stars!=0">{{item.stars}}</text><text
						 v-if="item.stars==0">点赞</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				all:[],
				historys: [],
				isDis: true,
				searchValue: '',
				tuijians: [{
						id: 1,
						title: '渣男'
					},
					{
						id: 2,
						title: '五一旅游'
					},
					{
						id: 3,
						title: '风景'
					},
					{
						id: 4,
						title: '卢本伟'
					},
					{
						id: 5,
						title: 'rng'
					}
				]
			}
		},
		methods: {
			go_detail(id) {
				uni.navigateTo({
					url: 'detail?quanId=' + id
				});
			},
			prevMoreImg(images, index) {
				let imgs = [];
				images.forEach((item) => {
					imgs.push(utils.baseImgUrl + item.imgUrl);
				});
				uni.previewImage({
					urls: imgs,
					current: imgs[index]
				})
			},
			go_userinfo(userId) {
				uni.navigateTo({
					url: '../usercenter/userinfo?userId=' + userId
				});
			},
			prevImg(imgUrl) {
				uni.previewImage({
					urls: [this.getRealPath(imgUrl)]
				})
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			tuijianSearch(value) {

				this.doSearch(value);
			},
			search() {
				this.doSearch(this.searchValue);
			},
			clear() {
				this.searchValue = '';
				this.isDis = true;
			},
			doSearch(value) {
				if (value.length == 0) {
					return;
				}
				utils.loading("搜索中...");
				this.isDis = false;
				this.historys.push(value);
				let his = Array.from(new Set(this.historys));
				this.historys = his;
				uni.setStorageSync("history", his);
				let that = this;
				utils.get("quan/searchvalue",{
					searchValue:value
				},function(data) {
					that.all = data;
				});
			},
			clearHistory: function() {
				this.historys = [];
				uni.setStorageSync("history", []);
			},
			timeAgo(dateTimeStamp) {
				var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime(); //获取当前时间毫秒
				var diffValue = now - dateTimeStamp; //时间差
			
				if (diffValue < 0) {
					return;
				}
				var result = "";
				var minC = diffValue / minute; //计算时间差的分，时，天，周，月
				var hourC = diffValue / hour;
				var dayC = diffValue / day;
				var weekC = diffValue / week;
				var monthC = diffValue / month;
				if (monthC >= 1 && monthC <= 3) {
					result = " " + parseInt(monthC) + "月前"
				} else if (weekC >= 1 && weekC <= 3) {
					result = " " + parseInt(weekC) + "周前"
				} else if (dayC >= 1 && dayC <= 6) {
					result = " " + parseInt(dayC) + "天前"
				} else if (hourC >= 1 && hourC <= 23) {
					result = " " + parseInt(hourC) + "小时前"
				} else if (minC >= 1 && minC <= 59) {
					result = " " + parseInt(minC) + "分钟前"
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = "刚刚"
				} else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			}

		},
		onLoad() {
			let historys = uni.getStorageSync("history") || [];
			this.historys = historys;
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.main-container {
		display: flex;
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.search {
		width: 100%;
		height: 84upx;
		background-color: #2E77ED;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.inp {
		width: 650upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		background-color: white;
		align-items: center;
		margin-left: 20upx;
		border-radius: 8upx;
		font-size: 26upx;
	}

	.inp image {
		width: 48upx;
		height: 48upx;
	}

	.inp input {
		width: 554upx;
	}

	.search text {
		font-size: 28upx;
		margin-left: 10upx;
		color: white;
	}

	.tuijian {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.tuijian view {
		height: 36upx;
		font-size: 24upx;
		background-color: white;
		padding: 10upx 14upx;
		text-align: center;
		line-height: 36upx;
		margin-left: 25upx;
	}

	.history {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.his {
		margin-left: 15upx;
		font-size: 24upx;
		color: #666;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}

	.history view {
		width: 670upx;
		height: 90upx;
		padding: 0 20upx;
		border-bottom: 1upx solid #f0f0f0;
		font-size: 28upx;
		line-height: 90upx;
	}
	.quans {
		display: flex;
		width: 100%;
		margin-top: 10upx;
		flex-direction: column;
	}
	
	.quan {
		width: 100%;
		background-color: #ffffff;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}
	
	.top {
		width: 92%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 25upx;
	
	}
	
	.top image {
		height: 60upx;
		width: 60upx;
		border-radius: 60upx;
	}
	
	.top view {
		height: 60upx;
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.detail {
		width: 90%;
		margin-top: 15upx;
	}
	
	.detail text {
		font-size: 28upx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.img {
		width: 98%;
		height: 360upx;
		margin-top: 10upx;
	}
	
	.detail .dimage {
		width: 100%;
		height: 360upx;
		border-radius: 6upx;
	}
	
	.duotu {
		width: 100%;
		height: 215upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10upx;
	}
	
	.duotu view {
		width: 33%;
		height: 215upx;
	
	}
	
	.duotu image {
		width: 210upx;
		height: 210upx;
	}
	
	.pinglun {
		width: 92%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15upx;
	}
	
	.pinglun view {
		width: 50%;
		text-align: center;
		height: 45upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	
	}
	
	.pinglun view image {
		height: 30upx;
		width: 30upx;
	}
	
	.pinglun view text {
		font-size: 22upx;
		margin-left: 10upx;
	}
	
	.nickName {
		font-size: 24upx;
	}
	
	.time {
		font-size: 22upx;
		color: #999999;
	}
	
</style>
